
@mixin clearfix(){
  &:before,
  &:after{
      content:'';
      display:table;
  }
  &:after{
      clear:both;
  }
}


@mixin align-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  @if not $width and not $height {
      transform:translate(-50%,-50%);
  } @else if $width and $height {
      width:$width;
      height:$height;
      margin-top:-($whidth/2);
      margin-left:-($whidth/2);
  } @else if not $height {
      width: $width;
      margin-left: -($width / 2);
      transform: translateY(-50%);
  } @else {
      height: $height;
      margin-top: -($height / 2);
      transform: translateX(-50%);
  }
}

//$line:超出显示几行省略号
//$substract:预留区域百分比
@mixin text-overflow($line:1,$substract:0){
  overflow:hidden;
  @if $line==1{
      white-space:nowrap;
      text-overflow:ellipsis;
      width:100% -$substract;
  }
  @else{
      display: -webkit-box;
      -webkit-line-clamp: $line;
      -webkit-box-orient: vertical;
  }
}

$border-poses:top,
right,
bottom,
left;
$color:red;
@mixin border-1px($color:$color, $poses:$border-poses) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        @each $pos in $poses {
            border-#{$pos}: 1px solid $color;
            #{$pos}: 0;
        }
    }
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio: 1.5) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
}
@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio: 2) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.5); //像素比为2的时候，我们设置缩放为0.5
        transform: scaleY(0.5);
    }
}
@media (-webkit-min-device-pixel-ratio:3),
(min-device-pixel-ratio: 3) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.333333);//像素比为3的时候，我们设置缩放为0.33333
        transform: scaleY(0.333333);
    }
}


@mixin triangle($width:10px, $height:10px, $color:red, $direction:top) {
  $angle-direction: ( top: bottom left right, bottom: top left right, left: right top bottom, right: left top bottom);
  $conf: map-get($angle-direction, $direction);
  @if $direction==top or $direction==bottom {
      $width: $width/2;
  }
  @else {
      $height: $height/2;
  }
  width: 0;
  height: 0;
  border-#{nth($conf, 1)}: $height solid $color;
  border-#{nth($conf, 2)}: $width solid transparent;
  border-#{nth($conf, 3)}: $width solid transparent;
}
